import * as path from "path";
import * as webpack from "webpack";
import HtmlWebpackPlugin from "html-webpack-plugin";
import { ROOT_DIR } from "../webpack.const";
import CopyWebpackPlugin from "copy-webpack-plugin";

const config: webpack.Configuration = {
  name: "mixing-process-home",
  entry: {
    index: {
      import: path.resolve(
        ROOT_DIR,
        "./src/modules/mixing-process/home/scripts/index.ts"
      ),
      filename: "scripts/index.bundle.js",
    },
  },
  output: {
    path: path.join(ROOT_DIR, "./dist/mixing-process/home"),
    filename: "index.bundle.js",
    // 告知 webpack 在写入到输出文件系统时检查输出的文件是否已经存在并且拥有相同内容。
    compareBeforeEmit: true,
    clean: true,
    publicPath: "/mixing-process/home/",
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(
        ROOT_DIR,
        "./src/modules/mixing-process/home/index.html"
      ),
      filename: "index.html",
      // 设置编译后注入到 html 脚本的路径从当前 html 页面开始查找
      publicPath: "",
      chunks: ["index"],
    }),
    new CopyWebpackPlugin({
      patterns: [
        {
          from: path.resolve(ROOT_DIR, "./src/modules/mixing-process/home/img"),
          to: "img",
        },
      ],
    }),
  ],
  module: {
    rules: [
      {
        test: /\.(png|mp4)$/i,
        type: "asset/resource",
      },
    ],
    generator: {
      "asset/resource": {
        // 所有图片存放在 dist/login/images 目录下
        outputPath: "img",
        filename: "[name][ext]",
        // 解析 css sass scss 中图片的引用时，样式文件中的 url 解析使用 images/*.png 格式。
        publicPath: "img/",
      },
    },
  },
};

export default config;
